<template>
	<s-layout class="wallet-wrap" title="货款余额">
		<!-- 钱包卡片 -->
		<view class="header-box ss-flex ss-row-center ss-col-center">
			<view class="card-box" :style="{backgroundImage:'url('+sheep.$url.static('static/card_bg.png')+')'}">
				<view class="card-head ss-flex ss-col-center">
					<view class="card-title ss-m-r-10">账户货款余额</view>
				</view>
				<view class="ss-m-t-50 card-money">
					<view class="money-num">{{ userInfo.payment_goods ? userInfo.payment_goods : '0.00' }}</view>
				</view>
			</view>
		</view>
		<button class="add-btn ss-reset-button" @tap="state.showModal = true">
			直充货款
		</button>
		<button class="grey-btn ss-reset-button" @tap="toCorrect">
			进 / 出货
		</button>
		<view class="record" @tap="sheep.$router.go('/pages/pay/foods-log')">
			货款记录 >>
		</view>
		<view class="mes">
			<image class="im" :src="sheep.$url.static('/static/mes.png')" mode=""></image>
		</view>
		<view class="ss-p-30 color">
			<!-- <mp-html class="richtext" :content="state.content"></mp-html> -->
			1、微信直充：微信零钱充值，充值金额不允许提现，只能在商城消费。
			2、进货：将账户余额待结算货款进行转换充值至货款。
		</view>

		<!-- 充值弹框 -->
		<su-popup :show="state.showModal" type="center" round="20" @close="state.showModal = false" showClose>
			<view class="ss-p-x-20 ss-p-y-30 box">
				<view class="model-title ss-m-b-30 ss-m-l-20">货款直充</view>
				<view class="input-box ss-flex ss-col-center border-bottom ss-m-b-30 ss-m-x-20">
					<view class="unit ss-font-50">￥</view>
					<uni-easyinput trim="all" :inputBorder="false" class="ss-flex-1 ss-p-l-10"
						v-model="state.recharge_money" type="number" placeholder="请输入金额" maxlength="5" />
				</view>
				<button class="ss-reset-button model-btn add-btn" @tap="onConfirm">
					确定充值
				</button>
				<view class="model-subtitle ss-m-y-20 ss-m-x-20">
					需要支付¥{{ (parseInt((userInfo.level_rate*state.recharge_money/100) * 100 ) / 100).toFixed(2)}}</view>
			</view>
		</su-popup>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		watch,
		reactive
	} from 'vue';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import dayjs from 'dayjs';
	import _ from 'lodash';

	const headerBg = sheep.$url.css('/assets/addons/shopro/uniapp/user/wallet_card_bg.png');

	const pagination = {
		data: [],
		current_page: 1,
		total: 1,
		last_page: 1,
		expense: 0,
		income: 0,
	};
	// 数据
	const state = reactive({
		showModal: false,
		date: [],
		currentTab: 0,
		pagination,
		loadStatus: '',
		today: '',
		recharge_money: ''
	});

	const userInfo = computed(() => sheep.$store('user').userInfo);

	onLoad(async (options) => {
		// console.log(userInfo,'userInfo')
	});

	async function toCorrect() {
		const res = await sheep.$api.trade.rechargeDue();
		if (res.code === 1) {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
			sheep.$store('user').getInfo();
			// #ifdef MP
			// sheep.$platform.useProvider('wechat').subscribeMessage('money_change');
			// #endif
			// sheep.$router.go('/pages/pay/index', {
			// 	orderSN: data.order_sn,
			// 	type: 'recharge',
			// });
		}
	}

	async function onConfirm() {
		const {
			code,
			data
		} = await sheep.$api.trade.rechargePayment({
			recharge_money: state.recharge_money,
		});
		if (code === 1) {
			// #ifdef MP
			sheep.$platform.useProvider('wechat').subscribeMessage('money_change');
			// #endif
			sheep.$router.go('/pages/pay/index', {
				orderSN: data.order_sn,
				type: 'recharge',
			});
		}
	}
</script>

<style lang="scss" scoped>
	:deep() {
		.uni-easyinput__content-input {
			font-size: 48rpx !important;
			font-weight: 600;
		}
	}

	.add-btn {
		margin: 30rpx;
		flex: 1;
		background: #252525;
		border-radius: 20rpx;
		font-size: 30rpx;
		font-weight: 500;
		line-height: 80rpx;
		color: $white;
		position: relative;
		z-index: 1;
	}

	.grey-btn {
		margin: 30rpx;
		flex: 1;
		box-shadow: 0 0 0 1px #979797;
		border-radius: 20rpx;
		font-size: 30rpx;
		font-weight: 500;
		line-height: 80rpx;
		color: #979797;
		position: relative;
		z-index: 1;
	}

	.record {
		margin: 30rpx;
		text-align: right;
	}

	.mes {
		margin: 30rpx;
		margin-bottom: 0;
		height: 46rpx;
		width: 92%;

		.im {
			height: 46rpx;
			width: 100%;
		}
	}

	.color {
		color: #979797;
		line-height: 50rpx;
	}

	.box {
		width: 660rpx;

		.model-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
		}

		.model-subtitle {
			font-size: 26rpx;
			color: #979797;
			text-align: center;
		}

		.model-btn {
			width: 94%;
			margin: 0 auto;
			height: 80rpx;
			border-radius: 20rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
			line-height: normal;
		}

		.input-box {
			height: 100rpx;

			.unit {
				color: #000;
				font-weight: 600;
				line-height: normal;
			}

			.uni-easyinput__placeholder-class {
				font-size: 30rpx;
				height: 40rpx;
				line-height: normal;
			}
		}
	}


	// 钱包
	.header-box {
		padding: 30rpx 30rpx 10rpx;

		.card-box {
			width: 100%;
			min-height: 244rpx;
			padding: 40rpx;
			background-size: 100% 100%;
			border-radius: 30rpx;
			overflow: hidden;
			position: relative;
			z-index: 1;
			box-sizing: border-box;

			&::after {
				content: '';
				display: block;
				width: 100%;
				height: 100%;
				z-index: 2;
				position: absolute;
				top: 0;
				left: 0;
				background: v-bind(headerBg) no-repeat;
				pointer-events: none;
			}

			.card-head {
				color: $white;
				font-size: 30rpx;
			}

			.card-money {
				text-align: center;
			}


			.money-num {
				font-size: 60rpx;
				line-height: 60rpx;
				font-weight: 500;
				color: $white;
				font-family: OPPOSANS;
			}
		}
	}
</style>